<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="resources/css/jquery-ui-1.8.21.custom.css">
		<style>
			#drop_a_container, #drop_b_container, #drag_a_container, #drag_b_container{ 
				width:500px;
				height:105px; 
				padding:5px 0 5px 20px; 
				margin-bottom:10px; 
				border:2px solid black; 
				font-size:100px; }
			p { 
				float:left; 
				margin:0; }
			.drag_a, .drag_b { 
				width:70px; 
				height:70px; 
				padding:20px 0 0 20px; 
				margin: 7px 0px 0 40px; 
				float:left; 
				font-size:14px; 
				color:#3399FF; 
				background: #E1F0FF;  }
			.drag_b { 
				color:#FF3399; 
				background: #FFCCCC; }
			.drop {
				width:78px; 
				height:78px; 
				padding:10px 0 0 10px; 
				margin: 7px 0px 0 40px;
				float:left; 
				font-size:14px; 
				color:#3399FF;
				border:1px solid #000; }
			.over { background-color:#ccffcc; }
		</style>
		<script src="resources/js/jquery-1.7.2.min.js"></script>
        <script src="resources/js/jquery-ui-1.8.21.custom.min.js"></script>
</head>
<body>
<div id="drop_a_container">
	<p>A</p>
	<div class="drop"></div>
	<div class="drop"></div>
	<div class="drop"></div>
</div>
<div id="drag_a_container">
	<p>A</p>
	<div class="drag_a">a1</div>
	<div class="drag_a">a2</div>
	<div class="drag_a">a3</div>
</div>
<div id="drop_b_container">
	<p>B</p>
	<div class="drop"></div>
	<div class="drop"></div>
	<div class="drop"></div>
</div>
<div id="drag_b_container">
	<p>B</p>
	<div class="drag_b">b1</div>
	<div class="drag_b">b2</div>
	<div class="drag_b">b3</div>
</div>
<script type="text/javascript">
	$(function(){
		var dragOption_a = {
				scope: "a"
			},
			dropOption_a = {
				scope: "a",
				hoverClass: "over"
			},
			dragOption_b = {
				scope: "b",
				snap: ".drop"
			},
			dropOption_b = {
				hoverClass: "over",
				scope: "b"
			};
		
		$("#drop_a_container").droppable(dropOption_a);
		$(".drag_a").draggable(dragOption_a);
		$("#drop_b_container").droppable(dropOption_b);
		$(".drag_b").draggable(dragOption_b);
		
	});
</script>
</body>
</html>